<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传</title>
    <link rel="stylesheet" href="css/app.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="layer/layer.js"></script>
</head>
<body>
<form action="">
    <div>
        <div class="up-btn" data-type="img01">上传1</div>
        <div class="file-box"></div>
    </div>

    <div>
        <div class="up-btn" data-type="img02">上传2</div>
        <img src="" alt="" class="file-img">
    </div>

    <style>
        input, button {
            outline: none;
        }

        * {
            -moz-osx-font-smoothing: auto;
            -webkit-font-smoothing: antialiased;
        }

        .group-price {
            border: 1px solid #efefef;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
        }

        .group-price h4 {
            font-size: 14px;
            padding-bottom: 10px;
            margin: 0;
            border-bottom: 1px solid #efefef;
        }

        .group-label {
            display: flex;
            justify-content: flex-start;
            margin: 10px 0;
        }

        .group-label .labels {
            width: 80px;
            height: 30px;
            margin-right: 10px;
        }

        .group-label .labels input, .group-only-style, .group-model-style {
            display: none;
        }

        .group-label .labels label {
            display: block;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #2d8dff;
            box-sizing: border-box;
            color: #2d8dff;
        }

        .group-label .labels input[type="radio"]:checked + label {
            background-color: #2d8dff;
            color: #ffffff;
        }

        .group-only-style .form-group-style {
            height: 40px;
        }

        .group-only-style .form-group-style label {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 40px;
        }

        .group-only-style .form-group-style label strong {
            width: 100px;
            font-size: 12px;
            margin-right: 10px;
            text-align: right;
            color: #666666;
            font-weight: normal;
        }

        .group-only-style .form-group-style label input {
            flex: 1;
            height: 30px;
            border: none;
            border-bottom: 1px solid #efefef;
        }

        .group-only-style .form-group-style label input:focus {
            border-color: #2d8dff;
        }

        .group-model-style .group-type-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            border-bottom: 1px solid #efefef;
        }

        .group-type-add {
            display: none;
            height: 52px;
            padding: 5px 0;
            box-sizing: border-box;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            margin: 5px 0;
        }

        .group-type-add button {
            display: block;
            width: 100%;
            height: 40px;
            background-color: #2d8dff;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }

        .group-type-add button:hover {
            background-color: #2d6aee;
        }

        .group-model-style .group-type-title h5 {
            margin: 0;
        }

        .group-model-style .group-type-title button {
            background-color: transparent;
            border: 1px solid #2d8dff;
            font-size: 12px;
            border-radius: 5px;
            color: #2d8dff;
            padding: 3px 10px;
            cursor: pointer;
            margin-right: 5px;
        }

        .group-model-style .group-type-title button:hover {
            background-color: #2d8dff;
            color: #ffffff;
        }

        .group-model-style .group-type-title button.group-del {
            color: red;
            border-color: red;
        }

        .group-model-style .group-type-title button.group-del:hover {
            background-color: red;
            color: #ffffff;
        }

        .group-model-style .group-type dl {
            display: flex;
            flex-flow: row wrap;
            margin: 10px 0;
        }

        .group-model-style .group-type dl dd {
            position: relative;
            border: 1px solid #efefef;
            color: #333333;
            font-size: 12px;
            padding: 6px 40px 6px 20px;
            margin: 0 5px 5px 0;
        }

        .group-model-style .group-type dl dd::after {
            position: absolute;
            content: "\2715";
            top: 3px;
            right: 5px;
            font-size: 16px;
            color: #efefef;
        }

        .group-model-style .group-type dl dd:hover {
            color: #ffffff;
            background-color: #2d8dff;
            cursor: pointer;
        }

        .group-model-style .group-type dl dd:hover::after {
            color: #ffffff;
        }

        .group-model-style table {
            width: 100%;
        }

        .group-model-style table th {
            font-size: 12px;
            text-align: center;
            border-bottom: 1px solid #a3a3a3;
            padding: 5px 0;
            white-space: nowrap;
        }

        .group-model-style table td {
            font-size: 12px;
            text-align: center;
            border-bottom: 1px solid #e3e3e3;
            padding: 5px 0;
            white-space: nowrap;
        }

        .group-model-style table td label {
            display: flex;
            text-align: center;
        }

        .group-model-style table td label input {
            flex: 1;
            height: 40px;
            padding: 0 5px;
            box-sizing: border-box;
            border: none;
            border-bottom: 1px solid transparent;
            text-align: center;
            color: #666666;
        }

        .group-model-style table td label input:focus {
            border-bottom-color: #2d8dff;
        }


    </style>

    <div class="group-price">
        <input type="hidden" name="" id="group-ary">
        <input type="hidden" name="" id="group-item-ary">
        <h4>规格</h4>
        <div class="group-label">
            <div class="labels only-label">
                <input type="radio" value="10" name="labels" id="only">
                <label for="only">单规格</label>
            </div>
            <div class="labels model-label">
                <input type="radio" value="20" checked name="labels" id="model">
                <label for="model">多规格</label>
            </div>
        </div>

        <div class="group-only-style">
            <div class="form-group-style">
                <label>
                    <strong>商品价格</strong>
                    <input type="text">
                </label>
            </div>
            <div class="form-group-style">
                <label>
                    <strong>商品划线价</strong>
                    <input type="text">
                </label>
            </div>
            <div class="form-group-style">
                <label>
                    <strong>当前库存数量</strong>
                    <input type="text">
                </label>
            </div>
            <div class="form-group-style">
                <label>
                    <strong>商品重量(Kg) </strong>
                    <input type="text">
                </label>
            </div>
        </div>

        <div class="group-model-style">
            <div class="group-add-type">

                <div class="group-type"></div>
            </div>
            <!--            <div class="group-type">-->
            <!--                <div class="group-type-title">-->
            <!--                    <h5>颜色</h5>-->
            <!--                    <div>-->
            <!--                        <button type="button" class="group-add">添加规格值</button>-->
            <!--                        <button type="button" class="group-del">删除</button>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--                <dl>-->
            <!--                    <dd>红</dd>-->
            <!--                    <dd>蓝</dd>-->
            <!--                    <dd>黑</dd>-->
            <!--                    <dd>白</dd>-->
            <!--                </dl>-->
            <!--            </div>-->

            <!--            <div class="group-type">-->
            <!--                <div class="group-type-title">-->
            <!--                    <h5>尺寸</h5>-->
            <!--                    <div>-->
            <!--                        <button type="button" class="group-add">添加规格值</button>-->
            <!--                        <button type="button" class="group-del">删除</button>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--                            <dl>-->
            <!--                                <dd>S</dd>-->
            <!--                                <dd>M</dd>-->
            <!--                                <dd>L</dd>-->
            <!--                                <dd>XL</dd>-->
            <!--                            </dl>-->
            <!--            </div>-->

            <div class="group-type-add">
                <button type="button">添加规格组</button>
            </div>

            <div class="group-table">
                <!--                <table>-->
                <!--                    <thead>-->
                <!--                    <tr>-->
                <!--                        <th>规格一</th>-->
                <!--                        <th>规格二</th>-->
                <!--                        <th>详情图</th>-->
                <!--                        <th>划线价</th>-->
                <!--                        <th>现价</th>-->
                <!--                        <th>重量(Kg)</th>-->
                <!--                    </tr>-->
                <!--                    </thead>-->
                <!--                    <tbody>-->
                <!--                    <tr>-->
                <!--                        <td rowspan="2">红色</td>-->
                <!--                        <td>X</td>-->
                <!--                        <td>-->
                <!--                            <img src="http://tp.cn/upload/image/201912051575528498925234.jpeg" alt="" width="50"-->
                <!--                                 height="50">-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                    </tr>-->
                <!--                    <tr>-->
                <!--                        <td>X</td>-->
                <!--                        <td>-->
                <!--                            <img src="http://tp.cn/upload/image/201912051575528498925234.jpeg" alt="" width="50"-->
                <!--                                 height="50">-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                        <td>-->
                <!--                            <label><input type="text" value="100"></label>-->
                <!--                        </td>-->
                <!--                    </tr>-->
                <!--                    </tbody>-->
                <!--                </table>-->
            </div>
        </div>
    </div>

    <!--    <input type="submit" value="提交">-->
</form>
<script type="text/javascript" defer="defer">

    /** 图片上传 **/
    var activeArray = Array(); //最终选中图片存放数组
    $(document).ready(function () {
        $(".up-btn").on('click', function () {
            let that = $(this),
                type = that.attr('data-type');
            let upFrame = layer.open({
                type: 2, //类型
                title: '图片管理', //标题
                content: ['./upload.html', 'no'], //iframe的url，no代表不显示滚动条
                area: ['893px', '580px'], //弹窗宽高
                btn: ['确定', '取消'], //按钮
                shade: [0.3], //遮罩透明度
                shadeClose: false, //点击遮罩不关闭
                id: 'upload',
                anim: 2, //
                yes: function () {
                    if (type === 'img01') {
                        let imgHtml = that.next('.file-box').html();
                        for (let item of activeArray) {
                            imgHtml += "<img src='" + item.url + "' alt='" + item.url + "'>";
                        }
                        that.next('.file-box').html(imgHtml);
                    } else if (type === 'img02') {
                        let imgNmu = activeArray.length - 1;
                        that.next('.file-img').attr({'src': activeArray[imgNmu].url, 'alt': activeArray[imgNmu].url});
                    }
                    layer.close(upFrame);
                },
                btnAlign: 'l', //按钮位置
                closeBtn: 0, //去掉关闭按钮
            });
        });
    });
    /** 图片上传END */

    let
        // 规格分类组 [{name:'颜色',type:[{name:'红色',code:'01'},{name:'绿色',code:'02'}]},{name:'尺寸',type:[{name:'X',code:'aa'},{name:'S',code:'bb'}]}]
        groupArray = Array(),
        // 产生规格商品组 [{code:01aa,name_01:'红色',name_02:'X',pic:'',lint:100,price:120,spec:50}]
        groupItemArray = Array();

    // 初始化
    $(document).ready(function () {

        // 判断当前规格显示
        seeGroup($(".labels input[type='radio']:checked").val());

        // 规格组选择
        $(".labels input[type='radio']").on('change', function () {
            seeGroup($(this).val());
        });

        // 添加规格组
        $(".group-type-add button").on('click', function () {
            layer.prompt({
                title: "添加规格组"
            }, function (val, index) {
                groupArray.push({
                    name: val,
                    type: Array()
                });
                addGroupType();
                layer.close(index);
            });
        });

        //添加规格组子规格
        $("body").on('click', ".group-add", function () {
            let groupIndex = $(this).attr('data-index'),
                randStr = String();
            if (groupIndex === '0') {
                let randStrAry = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                    s1 = Math.round(Math.random() * 9),
                    s2 = Math.round(Math.random() * 9);
                randStr = randStrAry[s1] + randStrAry[s2];
                for (let i = 1; i < 2; i--) {
                    if (onlyCode(groupIndex, randStr)) {
                        randStr = randStrAry[s1] + randStrAry[s2];
                    } else {
                        break;
                    }
                }
            } else {
                let randStrAry = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
                    s1 = Math.round(Math.random() * 25),
                    s2 = Math.round(Math.random() * 25);
                randStr = randStrAry[s1] + randStrAry[s2];
                for (let i = 1; i < 2; i--) {
                    if (onlyCode(groupIndex, randStr)) {
                        randStr = randStrAry[s1] + randStrAry[s2];
                    } else {
                        break;
                    }
                }
            }

            layer.prompt({
                title: "添加子规格"
            }, function (val, index) {
                let typeAry = groupArray[groupIndex].type;
                typeAry.push({
                    code: randStr,
                    name: val
                });
                groupArray[groupIndex].type = typeAry;
                addGroupType();
                layer.close(index);
            });
        });

        // 删除主规格
        $('body').on('click', '.group-del', function () {
            let delIndex = $(this).attr('data-index');
            layer.confirm('您要删除规格组么？', {
                icon: 7,
                title: "删除"
            }, function (index) {
                groupArray.splice(Number(delIndex), 1);
                addGroupType();
                layer.close(index)
            });
        });

        // 删除子规格
        $('body').on('click', '.group-type dd', function () {
            let delFirIndex = $(this).attr('data-first-index'),
                delItemIndex = $(this).attr('data-item-index');
            layer.confirm('您要删除规格么？', {
                icon: 7,
                title: "删除"
            }, function (index) {
                let typeAry = groupArray[delFirIndex].type,
                    delCode = typeAry[delItemIndex].code,
                    delItemGroup = Array(),
                    newAryGroup = Array();
                groupArray[delFirIndex].type = typeAry;
                for (let item in groupItemArray) {
                    let str = groupItemArray[item].code;
                    if (str.search(delCode) === 2) {
                        delItemGroup[delItemGroup.length] = item;
                    }
                }
                for (let item_01 in groupItemArray) {
                    let onlyIndex = false;
                    for (let item_02 of delItemGroup) {
                        if (item_01 === item_02) {
                            onlyIndex = true;
                            break;
                        }
                    }
                    if (onlyIndex === false) {
                        newAryGroup.push(groupItemArray[item_01]);
                    }
                }
                groupItemArray = newAryGroup;
                typeAry.splice(Number(delItemIndex), 1);
                addGroupType();
                layer.close(index)
            });
        });

        // 划线价
        $("body").on('change', '.group-lint-change input', function () {
            let itemIndex = $(this).attr('data-index'),
                editItem = groupItemArray[itemIndex];
            editItem.lint = $(this).val();
            groupItemArray[itemIndex] = editItem;
            editAry();
        });

        // 现价
        $("body").on('change', '.group-price-change input', function () {
            let itemIndex = $(this).attr('data-index'),
                editItem = groupItemArray[itemIndex];
            editItem.price = $(this).val();
            groupItemArray[itemIndex] = editItem;
            editAry();
        });

        // 重量
        $("body").on('change', '.group-spec-change input', function () {
            let itemIndex = $(this).attr('data-index'),
                editItem = groupItemArray[itemIndex];
            editItem.spec = $(this).val();
            groupItemArray[itemIndex] = editItem;
            editAry();
        });
    });


    /**
     * 单/多规格切换
     * @param key 传入单/多规格自定义参数 10 单规格 20多规格
     */
    function seeGroup(key) {
        if (key === '10') {
            $(".group-only-style").show();
            $(".group-model-style").hide();
        } else if (key === '20') {
            $(".group-only-style").hide();
            $(".group-model-style").show();
            addGroupType();
        }
    }

    /**
     * 添加规格，重组dom
     * function addGroupType(key='add') {
     */
    function addGroupType() {
        if (groupArray.length < 2) {
            $(".group-type-add").show();
        } else {
            $(".group-type-add").hide();
        }
        let addHtml = "";
        for (let index in groupArray) {
            addHtml += '<div class="group-type"><div class="group-type-title"><h5>' + groupArray[index].name + '</h5><div><button type="button" class="group-add" data-index="' + index + '">添加规格值</button><button type="button" class="group-del" data-index="' + index + '">删除</button></div></div><dl>';
            for (let i in groupArray[index].type) {
                addHtml += '<dd data-first-index="' + index + '" data-item-index="' + i + '">' + groupArray[index].type[i].name + '</dd>';
            }
            addHtml += '</dl></div>';
        }
        $(".group-add-type").html(addHtml);

        if (groupArray.length === 1) {
            if (groupItemArray.length) {
                groupItemArray = [];
            }
            for (let item_01 of groupArray[0].type) {
                let onlyItem = true;
                for (let item_02 of groupItemArray) {
                    if (item_02.code === item_01.code) {
                        onlyItem = false;
                        break;
                    }
                }
                if (onlyItem) {
                    groupItemArray.push({
                        code: item_01.code,
                        name_01: item_01.name,
                        pic: '/static/common/image/sc.png',
                        lint: '0',
                        price: '0',
                        spec: '0'
                    });
                }
            }
        } else if (groupArray.length > 1) {
            if (groupItemArray.length) {
                if (typeof groupItemArray[0].name_02 === 'undefined') {
                    groupItemArray = [];
                }
                for (let code_01 of groupArray[0].type) {
                    for (let code_02 of groupArray[1].type) {
                        let codeItem = code_01.code + code_02.code,
                            onlyItem = true;
                        for (let item_01 of groupItemArray) {
                            if (item_01.code === codeItem) {
                                onlyItem = false;
                                break;
                            }
                        }
                        if (onlyItem) {
                            groupItemArray.push({
                                code: codeItem,
                                name_01: code_01.name,
                                name_02: code_02.name,
                                pic: '/static/common/image/sc.png',
                                lint: '0',
                                price: '0',
                                spec: '0'
                            });
                        }
                    }
                }
            }
        }
        // 生成表格
        let tablesHtml = String();
        if (groupArray.length) {
            tablesHtml += '<table><thead><tr><th>' + groupArray[0].name + '</th>';
            if (groupArray.length === 2) {
                tablesHtml += '<th>' + groupArray[1].name + '</th>';
            }
            tablesHtml += '<th>详情图</th><th>划线价</th><th>现价</th><th>重量(Kg)</th></tr></thead><tbody>';
            for (let item in groupItemArray) {
                if (groupArray.length === 2) {
                    tablesHtml += `<tr><td>${groupItemArray[item].name_01}</td><td>${groupItemArray[item].name_02 ? groupItemArray[item].name_02 : ''}</td>`;
                } else {
                    tablesHtml += '<tr><td>' + groupItemArray[item].name_01 + '</td></td>';
                }
                tablesHtml += `
                    <td>
                        <img src="${groupItemArray[item].pic}" alt="" class="up-btn" data-index="${item}" width="50" height="50">
                    </td>
                    <td><label class="group-lint-change"><input type="number" value="${groupItemArray[item].lint}" data-index="${item}" required></label></td>
                    <td><label class="group-price-change"><input type="number" value="${groupItemArray[item].price}" data-index="${item}" required></label></td>
                    <td><label class="group-spec-change"><input type="number" value="${groupItemArray[item].spec}" data-index="${item}" required></label></td>
                    </tr>
                `;
            }
            tablesHtml += '</tbody></table>';
            $(".group-table").html(tablesHtml);
        } else {
            $(".group-table").html("");
        }
        editAry();
    }

    /**
     * 修改上传参数
     */
    function editAry() {
        $("#group-ary").val(JSON.stringify(groupArray));
        $("#group-item-ary").val(JSON.stringify(groupItemArray));
    }


    /**
     * 验证重复
     * @param index 所属一级索引
     * @param key 需要判断的code
     * @returns {boolean} 返回真与假
     */
    function onlyCode(index, key) {
        for (let item of groupArray[index].type) {
            if (item.code === key) {
                return true;
            }
        }
        return false;
    }


</script>
</body>
</html>